<template>
  <div class="table-container">
    <el-row
      v-if="!noSearch"
      class="table-top-button-group"
    >
      <el-col :span="24">
        <slot name="searchCondition">
          <span>请添加searchCondition功能或Table传递noSearch</span>
        </slot>
      </el-col>
    </el-row>
    <div
      class="eltable-container"
      :class="{'no-page':noPage}"
    >
      <el-table
        ref="multipleTable"
        :data="tableData.list"
        :size="size"
        :height="customTableHeight?customTableHeight:tableHeight"
        :highlight-current-row="highlight"
        class="eltable"
        stripe
        :show-header="!noTableHearder"
        border
        :row-class-name="tableRowClassName"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handle"
        @sort-change="sortChange"
        @select="userChoose"
      >
        <el-table-column
          v-if="selection"
          type="selection"
        />
        <el-table-column
          v-if="!noIndex"
          type="index"
          label="序号"
          align="center"
          :resizable="false"
          :index="indexMethod"
          width="55px"
        />
        <slot name="table-column" />
      </el-table>
    </div>
    <el-pagination
      v-if="!noPage"
      background
      :current-page.sync="tableData.pageNum"
      :page-size="tableData.pageSize"
      layout="prev, pager, next, jumper"
      :total="tableData.total"
      style="margin-top: 20px"
    />
    <el-row
      v-if="!noBottom"
      class="table-bottom-button-group"
    >
      <el-col :span="24">
        <slot name="bottomCondition">
          <span>请添加bottomCondition功能或Table传递noBottom</span>
        </slot>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  props: {
    sortChange: {
      type: Function,
      default: () => {}
    },
    warningThreshold: {
      default: false
    },
    column: {
      type: Array
    },
    isDialog: {
      type: Boolean,
      default: false
    },
    noSearch: {
      type: Boolean,
      default: false
    },
    rowClick: {
      type: Function,
      default: () => {}
    },
    noTableHearder: {
      type: Boolean,
      default: false
    },
    noPage: {
      type: Boolean,
      default: false
    },
    noBottom: {
      type: Boolean,
      default: false
    },
    single: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    },
    noIndex: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Object,
      default: () => {
        return {
          list: [],
          pageNum: null,
          pageSize: 10,
          total: null
        }
      }
    },
    customTableHeight: {
      default: 0,
      type: Number
    },
    tableRowClassName: {
      default: ({ row }) => {
        return row.warning ? 'warning-row' : 'success-row'
      },
      type: Function
    },
    highlight: {
      type: Boolean,
      default: false
    },
    selection: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      // heightKey: {
      //   noPage: 48,
      //   noSearch: 56,
      //   noBottom: 56
      // },
      tableHeight: null
    }
  },
  watch: {
    'tableData.pageNum'() {
      this.$emit('sizeChange')
    },
    'tableData.pageSize'() {
      this.$emit('sizeChange')
    }
  },
  created() {
    // this.returnTableHeight()
  },
  mounted() {
    // const that = this
    // window.onresize = () => {
    //   return (() => {
    //     that.returnTableHeight()
    //   })()
    // }
  },
  methods: {
    indexMethod(index) {
      return index + 1 + this.tableData.pageSize * (this.tableData.pageNum - 1)
    },
    handle(row, event, column) {
      this.rowClick(row, event, column)
    },
    returnTableHeight() {
      let h =
        (this.noPage ? 0 : this.heightKey.noPage) +
        (this.noSearch ? 0 : this.heightKey.noSearch) +
        (this.noBottom ? 0 : this.heightKey.noBottom) +
        42 +
        64 +
        24
      this.tableHeight = document.documentElement.clientHeight - h
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    disabled() {
      if (this.tableData.total) {
        if (this.tableData.total > this.tableData.pageSize) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    },
    // 单选
    userChoose(selection, row){
      if(!this.single) return
      this.$refs.multipleTable.clearSelection();
      if (selection.length === 0) {
        return;
      }
      //这这里将这行的状态又变为了勾选
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.$emit('radioChange', row)
    },
  }
}
</script>
<style lang="less">
.el-table th > .cell {
  white-space: nowrap;
}
.table-container {
  padding: 15px;
  margin-bottom: 10px;
  // 表格上工具栏
  .pagination-container {
    text-align: right;
    background: #fbfcff;
    padding: 8px 6px;
    border: 1px solid rgba(205, 221, 237, 1);
    border-top: none;
  }
  .eltable-container {
    .warning-row {
      background: #ffe4e4;
    }
    .success-row {
      background: #fff;
    }
  }
  .table-top-button-group {
    > .el-col {
      padding-top: 6px;
      padding-bottom: 0px;
    }
  }
  .eltable-container.no-page {
    border: 1px solid rgba(205, 221, 237, 1);
  }
  .eltable-container {
    max-height: 70vh;
    min-height: 10vh;
    background: #fbfcff;
    border-bottom: none;
  }
  .table-bottom-button-group {
    .el-col {
      text-align: right;
      padding: 8px 0;
    }
  }
  .el-table th {
    background: #f2f2f2 !important;
    color: #000;
    font-weight: bold;
    * {
      background: #f2f2f2 !important;
    }
  }
  /deep/.el-table__row--striped td {
    background: rgba(0, 0, 0, 0.03) !important;
  }
  .el-table {
    border-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
